<template>
	<div class="backBb">
		<navTop></navTop>
		<div class="brandXie" :style="{width:(screenWidth>=1400?'1400px':'1200px')}">
			<div class="selectExamContain">
				<h3 class="examTitle">
					考试列表
					<div>
						<span @click="selectexamChoose('0')" :class="selectindex==0?'hover':''">未开始</span>
						<span @click="selectexamChoose('1')" :class="selectindex==1?'hover':''">进行中</span>
						<!-- <span @click="selectexamChoose('2')" :class="selectindex==2?'hover':''">已结束</span> -->
					</div>
				</h3>
				<div v-if="examlist.length>0">
					<div class="examlist">
						<div class="examlistbox" v-for="item in examlist">
							<div class="elsconlist">
								<div class="elsconlistTitle"><span>联考</span>{{item.navsname}}</div>
								<div class="elsconlistTime"><span>考试时间：{{item.maintenancegte?item.maintenancegte:'暂无时间'}}</span>年级：{{item.gradename}}</div>
								<div class="elsconlistProgress">
									考试进度：
									<ul>
										<li :class="item.type==0?'state1':''">考试信息</li>
										<li :class="item.type==1?'state2':''">在线阅卷</li>
										<li :class="item.type==2?'state3':''">成绩分析</li>
									</ul>
								</div>
							</div>
							<div>
								<el-button type="primary" @click="selectexam(item.type,item.nav5id,item.navsname,item)">选择考试</el-button>
							</div>
						</div>
					</div>
				</div>
				<div v-else class="emptyBox">
					<p>
						<img src="../../assets/image/empty.png" alt="">
						<span>抱歉，当前栏目下没有内容！</span>
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {decrypt} from '../../utils/cryptojs'
	import navTop from "../../components/head.vue"
	import {getSchoolExamRecord2Api} from '../../api/api.js'
	export default{
		data(){
			return{
				formInline: {
					user: '',
					region: '',
					classify:''
				},
				examlist:[],
				isLogin:{},
				screenWidth:'',	
				uniqueopened:true,
				selectindex:-1
			}
		},
		mounted() {
			// let params={id:113440}
			// scoreGetnavs(params).then(res=>{
			// 	console.info(res)
			// })
			this.screenWidth = document.body.clientWidth
			let userinfo=localStorage.getItem('accessToken')
			const decryptData = decrypt(userinfo)  
			this.isLogin = JSON.parse(decryptData)
			this.examlistclick('3')
		},
		methods:{
			lookprogress(){
				this.$router.push('/totalmarkingprogress')
			},
			allocationFp(){
				this.$router.push('/taskallocation')
			},
			// 获取列表
			examlistclick(num){
				let params={
					// userId:this.isLogin,
					userId:109459
				}
				getSchoolExamRecord2Api(params).then(res=>{
					if(res.code==0){
						if(num==0){
							this.examlist = res.obj.filter(item=>{return item.type==0})
							// console.info(this.examlist)
						}else if(num==1){
							this.examlist = res.obj.filter(item=>{return item.type==1})
						}else if(num==2){
							this.examlist = res.obj.filter(item=>{return item.type==2})
						}else{
							// this.examlist = res.obj
							this.examlist = res.obj.filter(item=>{return item.type!=2})
						}
					}else{
						this.$message({
							type: 'error',
							message: res.msg
						}); 
					}
				})
			},
			selectexamChoose(num){
				this.examlistclick(num)
				this.selectindex=num
			},
			selectexam(type,navid,title,item){
				this.$router.push('/progressstatistics/reportprogress?type='+type+'&navid='+navid+'&title='+title)
				sessionStorage.setItem('examItem',JSON.stringify(item))
			},
			onSubmit(){
				
			}
		},
		components:{navTop}
	}
</script>

<style scoped>
	.backBb{
		background:#eee;
	}
	.brandXie{
		padding:20px;
		margin:0 auto;
		display: flex;
		justify-content:space-between
	}
	.selectExamContain{
		box-sizing: border-box;
		background:#fff;
		height:calc(100vh - 120px);
		/* width:calc(100% - 350px); */
		width:100%;
		overflow-x:hidden;
		overflow-y:auto;
	}
	.examTitle{
		padding:20px;
		font-weight:normal;
		display: flex;
		justify-content: space-between;
	}
	.examTitle div{
		padding-right:6px;
		display: flex;
	}
	.examTitle div span{
		display: inline-block;
		font-size:14px;
		margin:0 10px;
		border:solid 1px #007AFF;
		border-radius:4px;
		padding:4px 15px;
		color:#007AFF;
		cursor: pointer;
	}
	.examTitle div span.hover,.examTitle div span:hover{
		background:#007AFF;
		color:#fff
	}
	.formContent{
		padding:20px 20px 0 20px;
	}
	.mainContent{
		background:#eceff3;
		padding:15px 0 15px;
		min-height: 87.7vh;
	}
	.maincon{
		box-sizing: border-box;
		width:1400px;
		background:#fff;
		margin:15px auto 0;
		padding:15px;
	}
	.maincon h3{
		font-size:16px;
		font-weight:normal;
		padding-top:10px;
	}
	.formInput{
		padding:20px 0;
	}
	.formInput >>> .el-select{
		margin-right:15px;
	}
	.formInput >>> .el-button--primary{
		background:#619CF5;
	}
	.paginationBox >>> .el-pagination.is-background .el-pager li:not(.disabled).active{
		background:#619CF5;
	}
	.listContent li{
		padding:10px 17px 20px;
		border:solid 1px #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom:15px;
		cursor: pointer;
	}
	.listContent li h3{
		font-size:18px;
		font-weight:normal;
		display: flex;
		align-items: center;
	}
	.listContent li h3 span{
		background:#619CF5;
		color:#fff;
		width:66px;
		font-size:14px;
		color:#fff;
		height:26px;
		line-height:26px;
		border-radius:4px;
		margin-right:10px;
		text-align: center;
	}
	.listContent li p{
		padding-top:18px;
		display: flex;
	}
	.listContent li p b{
		font-size:14px;
		font-weight:normal;
		color:#999;
		margin-right:60px;
	}
	.listContent li button{
		margin-left:40px;
		background:#619CF5;
	}
	.listContent li:hover{
		border:solid 1px #007AFF
	}
	.paginationBox{
		text-align: center;
		padding:40px 0 60px;
	}
	.emptyBox{
		background:#eceff3;
		height:calc(100vh - 80px);
		position:relative
	}
	.emptyBox p{
		position:absolute;
		left:50%;
		top:40%;
		transform:translate(-50%,-50%);
		text-align:center;
	}
	.emptyBox p span{
		display:block;
		padding-top:30px;
	}
	.selectboxlist{
		box-sizing: border-box;
		background:#fff;
		margin:15px 0;
		line-height:60px;
		padding:0 25px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:0 auto;
	}
	.selectboxlist span{
		width: 80px;
		height: 38px;
		background: #3874FF;
		border-radius: 6px;
		color:#fff;
		line-height:38px;
		text-align: center;
		cursor: pointer;
	}
	.selectboxlist p{
		display: flex;
		font-size:16px;
	}
	.selectboxlist p b{
		padding-right:80px;
		cursor: pointer;
	}
	.selectboxlist p b.hover{
		color:#3874FF
	}
	.examlist{
		height:calc(100vh - 240px);
		overflow-x: hidden;
		overflow-y: auto;
		padding:0 30px;
	}
	/*滚动条区域*/
	.examlist::-webkit-scrollbar{
	  width:5px;
	  background-color:#fff;
	}
	/*滚动条*/
	.examlist::-webkit-scrollbar-thumb{
	  background-color:#4076DD;
	  border-radius:50px;
	}
	/*滚动条外层轨道*/
	.examlist::-webkit-scrollbar-track {
	    /* -webkit-box-shadow: inset 0 0 1px ; */
	    background-color:#eee;
	    border-radius: 50px;
	}
	.examlistbox{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding:20px 15px 10px;
		border:solid 1px #C1C3C6;
		align-items: center;
		margin-bottom:23px;
	}
	.examlistbox >>> .el-button{
		width: 124px;
		height: 44px;
		border-radius: 6px;
		border: 1px solid #3874FF;
		color:#3874FF;
		font-size: 18px;
		line-height:44px;
		margin-right:20px;
		cursor: pointer;
		background:none;
		padding:0;
	}
	.elsconlist{
		cursor: pointer;
		margin-bottom:20px;
		width: 45%;
	}
	.examlistbox:hover{
		box-shadow: 0px 4px 10px 0px rgba(56,116,255,0.21);
		border: 1px solid #3874FF;
	}
	.elsconlistTitle{
		font-size:20px;
		display: flex;
		align-items: center;
	}
	.elsconlistTitle span{
		display: inline-block;
		width: 82px;
		height: 32px;
		background: #3874FF;
		border-radius: 4px;
		font-size:16px;
		color:#fff;
		text-align: center;
		line-height:32px;
		margin-right:10px;
	}
	.elsconlistTime{
		display: flex;
		font-size:14px;
		color:#989899;
		padding-top:18px;
		width:120%;
	}
	.elsconlistTime span{
		display:block;
		width:80%
	}
	.elsconlistProgress{
		display: flex;
		padding-top:20px;
		align-items: center;
		font-size:14px;
		color:#989899;
	}
	.elsconlistProgress ul{
		display: flex;
		align-items: center;
	}
	.elsconlistProgress ul li{
		box-sizing: border-box;
		text-align: center;
		color:#101010;
		margin-right:5px;
		width: 80px;
		height: 26px;
		line-height:26px;
		border-radius: 16px 0px 16px 0px;
		border: 1px solid #979797;
	}
	.elsconlistProgress ul .state1{
		background:#48D67B;
		border:solid 1px #48D67B;
		color:#fff;
	}
	.elsconlistProgress ul .state2{
		background:#6B8DF0;
		border:solid 1px #6B8DF0;
		color:#fff;
	}
	.elsconlistProgress ul .state3{
		background:#E9B573;
		border:solid 1px #E9B573;
		color:#fff;
	}
</style>